<template>
    <div id="mCom" class="mCom">
        <div class="search-box">
        <div class="search">
            <el-form inline>
                <el-form-item label="数据集名称：">
                    <el-input size="medium" disabled v-model="$route.query.tableName" style="width: 240px; margin-right: 10px" placeholder="请输入数据集名称"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-select size="medium" v-model="selectItem" placeholder="请选择数据子集" @change="handleSelect">
                      <el-option  :value="$route.query.importTableName" :label="$route.query.importTableName"></el-option>
                      <el-option v-for="item in dataType" :key="item.id" :value="item.name" :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
       </div>
       <div style="margin: 10px 10px 0 0">
       <el-form>
        <el-table
      v-loading="loadingDetail"
      :data="DataDetailList"
       :header-cell-style="{background:'#F5F5F5'}"
      max-height="600"
      :cell-style="{padding: '10px'}"
      border
    >
      <el-table-column  align="center" v-if="DataDetailList.length>0" type="index" width="60"/>
      <el-table-column :label="item.name" align="center"  v-for="(item,index) in headerColumn" :key="index">
        <template slot-scope="scope">
          {{scope.row[item.name]}}
        </template>
      </el-table-column>
      <!-- <el-table-column label="日志级别" align="center" prop="operationType" />
      <el-table-column
        label="模块名称"
        align="center"
        prop="model"
      />
      <el-table-column
        label="日志信息"
        align="center"
        prop="operationResult"
      />
      <el-table-column
        label="用户名"
        align="center"
        prop="userName"
      />
      <el-table-column
        label="机器地址"
        align="center"
        prop="ip"
      />
      <el-table-column
        label="时间"
        align="center"
        prop="operationTime"
      >
      <template slot-scope="scope">
          {{parseTimeToDate(scope.row.operationTime)}}
        </template>
      </el-table-column> -->
    </el-table>
    </el-form>
  </div>
  <div class="pagesize">
           <div id="fy" class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="formData.pageNumber" :page-sizes="[10, 20, 30, 50]"
        :page-size="formData.pageSize" layout="total, sizes, prev, pager, next"
        :total="total"></el-pagination>
      </div>
        </div>
    </div>
</template>
<script>
import { datasetDetail, datasubsetList } from "@/api/sourceDetail";
export default {
  name: "sourceDataMan",
  data() {
    return {
      selectItem: "",
      loadingDetail: false,
      dataType: [],
      // 表格数据
      DataDetailList: [],
      //表头
      total: 0,
      headerColumn: [],
      formData: {
        pageNumber: 1,
        pageSize: 10,
        tableName: ""
      }
    };
  },
  mounted() {
    this.getDetailList();
    this.getSubsetList();
  },
  methods: {
    handleSelect(item) {
      this.formData.tableName = item;
      datasetDetail(this.formData).then(res => {
        if (res.status == "SUCCESS") {
          this.headerColumn = res.data.columns;
          this.DataDetailList = res.data.data;
          this.total = res.data.count;
        }
      });
    },
    handleCurrentChange(val) {
      this.formData.pageNumber = val;
      this.getDetailList();
    },
    handleSizeChange(val) {
      this.formData.pageSize = val;
      this.getDetailList();
    },
    //数据子集查询
    getSubsetList() {
      datasubsetList(this.$route.query.id).then(res => {
        if (res.status == "SUCCESS") {
          this.dataType = res.data;
        }
      });
    },
    //获取详情列表
    getDetailList() {
      this.formData.tableName = this.$route.query.importTableName;
      datasetDetail(this.formData).then(res => {
        if (res.status == "SUCCESS") {
          this.headerColumn = res.data.columns;
          this.DataDetailList = res.data.data;
          this.total = res.data.count;
        }
      });
    },
    // 搜索按钮
    handleSetSearch() {}
  }
};
</script>
<style scoped>
.mCom .search-box {
  width: 99%;
  height: 30px;
  line-height: 30px;
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
}
</style>
